<template>
  <div>

    <div slot="header" class="card-header">测量和计数结果</div>


    <div>
        <div v-if="showEcharts" id="echarts-container" class="charts" ref="PeopleRef" style="width: 100%;height:800px;"></div>
        <p class="four" v-html="info"></p>
      </div>

    <!-- 测量和计数结果卡片 -->
    <el-card v-if="measurementResults || countResults" class="result-card">


      <template v-if="measurementResults">
        <table class="measurement-table">
          <tr>
            <th></th>
            <th>原始数据</th>
            <th>重采样后数据</th>
          </tr>
          <tr>
            <td>尺寸</td>
            <td>{{ measurementResults.original_size_of_raw_data }}</td>
            <td>{{ measurementResults.size_after_resampling }}</td>
          </tr>
          <tr>
            <td>Spacing</td>
            <td>{{ measurementResults.original_spacing }}</td>
            <td>{{ measurementResults.spacing_after_resampling }}</td>
          </tr>
          <tr>
            <td>直径</td>
            <td>{{ measurementResults.br_dia }}</td>
            <td>{{ measurementResults.ar_dia }}</td>
          </tr>
          <tr>
            <td>面积</td>
            <td>{{ measurementResults.br_areas }}</td>
            <td>{{ measurementResults.ar_areas }}</td>
          </tr>
          <tr>
            <td>体积</td>
            <td>{{ measurementResults.br_volume }}</td>
            <td>{{ measurementResults.ar_volume }}</td>
          </tr>
        </table>
      </template>
      <template v-if="countResults">
        <p>器官计数: {{ countResults.num_classes }}</p>
        <!-- 添加按钮 -->
        <el-button type="primary" @click="toggleTable">器官结果详情</el-button>
      </template>


      <transition name="fade">
        <template v-if="showTable">
          <el-table :data="dataArray" stripe border>
            <el-table-column prop="label" label="Label" :formatter="formatLabel" width="80px"></el-table-column>
            <el-table-column prop="range" label="X Y Z方向范围" width="300px"></el-table-column>
            <el-table-column prop="center" label="器官中心点坐标(X,Y,Z)"></el-table-column>
            <el-table-column prop="radius" label="半径(X,Y,Z)"></el-table-column>
            <el-table-column prop="diameter" label="直径(X,Y,Z)"></el-table-column>
            <el-table-column prop="biggest_area_index" label="最大横断面切片所在下标 (Z方向)"></el-table-column>
            <el-table-column prop="biggest_area" label="最大横断面积(Z方向)"></el-table-column>
            <el-table-column prop="biggest_area_shape" label="最大横断面的最大外接矩形长宽度(Z方向)"></el-table-column>
            <el-table-column prop="volume" label="器官体积" sortable></el-table-column>
            <!-- 添加其他列 -->
          </el-table>

        </template>
      </transition>



    </el-card>



    <!-- 数据加载中的提示 -->
    <el-alert v-if="isLoading" title="数据加载中..." type="info" show-icon></el-alert>

  </div>
</template>


<script>
import axios from "axios";
import svg from '../../../static/people.svg'

export default {
  name: "ResultInfo",

  props: {
    filename: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      showTable: false, // 控制表格显示与隐藏

      measurementResults: null,
      countResults: null,
      classInfo: null,
      customAnalysisResults: null,
      isLoading: false,
      showEcharts: false,

      info: '器官中心点坐标(X,Y,Z):<br/>\n' +
        '      最大横断面切片在下标 (Z方向):<br/>\n' +
        '      最大横断面积(Z方向):<br/>\n' +
        '      最大横断面的最大外接矩形长宽度(Z方向):<br/>',
      options: {
        tooltip: {},
        geo: {
          left: 10,
          right: '75%',
          map: 'organ_diagram',
          selectedMode: 'multiple',
          emphasis: {
            focus: 'self',
            itemStyle: {
              color: null
            },
            label: {
              position: 'bottom',
              distance: 0,
              textBorderColor: '#fff',
              textBorderWidth: 2
            }
          },
          blur: {},
          select: {
            itemStyle: {
              color: '#b50205'
            },
            label: {
              show: false,
              textBorderColor: '#fff',
              textBorderWidth: 2
            }
          }
        },
        grid: [
          {x: '30%', y: '10%', width: '20%', height: '25%'},
          {x: '60%', y: '40%', width: '20%', height: '25%'},
          {x: '30%', y: '40%', width: '20%', height: '25%'},
          // left: '60%',
          // top: '20%',
          // bottom: '20%'
        ],
        radar: {
          // shape: 'circle',
          indicator: [
            {name: 'X轴范围下限',},
            {name: 'X轴范围上限',},
            {name: 'y轴范围下限',},
            {name: 'y轴范围上限',},
            {name: 'z轴范围下限',},
            {name: 'z轴范围上限',}
          ],
          center: ['40%', '65%'],
          radius: 150
        },
        xAxis: [{}, {}],
        yAxis: [{
          data: [
            'X轴方向半径',
            'Y轴方向半径',
            'Z轴方向半径',
            // '最大横断面切片下标(Z方向)',
            // '最大横断面积(Z方向)',
            // '最大横断面的最大外接拒形宽度(Z方向)',
            // '器官体积'
          ]
        }, {}],
        series: [
          {
            type: 'bar',
            emphasis: {
              focus: 'self'
            },

            data: []//[121, 321, 141, 52, 198, 289, 139]
          },
        //   {
        //     name: 'background',
        //     type: 'pictorialBar',
        //     symbol: 'rect',
        //     color: {
        //         type: 'linear',
        //         x: 0,
        //         y: 0,
        //         x2: 1,
        //         y2: 0,
        //         colorStops: [
        //             {
        //                 offset: 0,
        //                 color: 'rgba(70, 125, 250)' // 0% 处的颜色
        //             },
        //             {
        //                 offset: 1,
        //                 color: 'rgba(70, 125, 250,.4)' // 100% 处的颜色
        //             }
        //         ],
        //         global: false
        //     },
        //     symbolRepeat: true,
        //     symbolSize: [4, 10],
        //     barGap: '-100%',
        //     barWidth: 4,
        //     symbolMargin: 1,
        //     symbolPosition: 'start',
        //     data: [0, 0, 0, 0, 0] // 这里的数据可以根据你的需求进行调整
        // },
        // 实际的数据条形图

          {
            type: 'gauge',
            startAngle: 180,
            endAngle: 0,
            center: ['70%', '35%'],
            radius: '40%',
            min: 0,
            max: 450000,
            splitNumber: 6,
            axisLine: {
              lineStyle: {
                width: 6,
                color: [
                  [0.33, '#FF6E76'],
                  [0.66, '#FDDD60'],
                  [1, '#58D9F9'],
                ]
              }
            },
            pointer: {
              icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
              length: '12%',
              width: 20,
              offsetCenter: [0, '-60%'],
              itemStyle: {
                color: 'auto'
              }
            },
            axisTick: {
              length: 12,
              lineStyle: {
                color: 'auto',
                width: 2
              }
            },
            splitLine: {
              length: 20,
              lineStyle: {
                color: 'auto',
                width: 5
              }
            },
            axisLabel: {
              color: '#464646',
              fontSize: 20,
              distance: -60,
              rotate: 'tangential',
              formatter: function (value) {
                if (value === 75000) {
                  return 'small';
                } else if (value === 225000) {
                  return 'middle';
                } else if (value === 375000) {
                  return 'big';
                }
                return '';
              }
            },
            title: {
              offsetCenter: [0, '-10%'],
              fontSize: 20
            },
            detail: {
              fontSize: 30,
              offsetCenter: [0, '-35%'],
              valueAnimation: true,
              formatter: function (value) {
                return Math.round(value) + '';
              },
              color: 'inherit'
            },
            data: [
              {
                value: 0,
                name: 'Volume Grade'
              }
            ]
          },
          {
            name: '',
            type: 'radar',
            data: [{
              value: [0, 0, 0, 0, 0, 0],
              // name: 'Allocated Budget'
            }],
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(70, 125, 250)' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(70, 125, 250,.4)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          },
        ],
      },
      myChart: null,
      organData: [
      // {
      //     "label": "1",
      //     "range": [[295, 413], [165, 303], [26, 46]],
      //     "center": "[354.0, 234.0, 36.0]",
      //     "radius": [59.0, 69.0, 10.0],
      //     "diameter": [118.0, 138.0, 20.0],
      //     "biggest_area_index": 38,
      //     "biggest_area": 8284,
      //     "biggest_area_shape": [137, 116],
      //     "volume": 101624
      //   },
      //     {
      //       "label": "3",
      //       "range": [[294, 380], [175, 262], [14, 34]],
      //       "center": "[337.0, 218.5, 24.0]",
      //       "radius": [43.0, 43.5, 10.0],
      //       "diameter": [86.0, 87.0, 20.0],
      //       "biggest_area_index": 27,
      //       "biggest_area": 11352,
      //       "biggest_area_shape": [68, 75],
      //       "volume": 171630
      //     },
      //     {
      //       "label": "6",
      //       "range": [[86, 323], [158, 366], [18, 48]],
      //       "center": "[204.5, 262.0, 33.0]",
      //       "radius": [118.5, 104.0, 15.0],
      //       "diameter": [237.0, 208.0, 30.0],
      //       "biggest_area_index": 39,
      //       "biggest_area": 184992,
      //       "biggest_area_shape": [204, 213],
      //       "volume": 2954694
      //     }
      ],
      eventName: "",


    };
  },

  mounted() {
    axios.get(svg)
      .then(response => {
        const svgText = response.data;
        this.$echarts.registerMap('organ_diagram', {svg: svgText});
        this.initEcharts()
        this.registerEcharts();
      })
      .catch(error => {
        console.error('Failed to fetch SVG:', error);
      });
  },


  methods: {
    initEcharts() {

      this.myChart = this.$echarts.init(this.$refs.PeopleRef)
      // this.$echarts.registerMap('organ_diagram', { svg: svg });
      // 指定图表的配置项和数据
      var option = this.options
      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(option);
      // this.myChart.off('mouseover');
      // this.myChart.off('mouseout');
    },
    registerEcharts() {
      console.log(this.myChart)
      this.myChart.on('mouseover', (event) => {
        this.myChart.dispatchAction({
          type: 'highlight',
          geoIndex: 0,
          name: event.name
        });
      });
      this.myChart.on('mouseout', (event) => {
        this.myChart.dispatchAction({
          type: 'downplay',
          geoIndex: 0,
          name: event.name
        });
      });
      this.myChart.on('click', (event) => {
        console.log(event)
        // this.updataData()
        console.log(['spleen', 'kidney', 'liver'].includes(event.name));
        if (['spleen', 'kidney', 'liver'].includes(event.name)) {
          console.log(event.name);
          this.eventName = event.name;
          this.updataData()
        }
      });
      this.option && this.myChart.setOption(option);
    },
    updataData() {
      var index = ['spleen', 'kidney', 'liver'].indexOf(this.eventName);

      var range = this.organData[index]['range'] //JSON.parse(this.organData[index]['range'])
      var radius = this.organData[index]['radius'] //JSON.parse(this.organData[index]['radius'])

      // console.log(this.organData[index])
      // console.log(this.organData[index]['range'][2][1])
      const option = {
        series: [
          {
            data: [radius[0], radius[1], radius[2]]
          },
          {
            data: [{
              value: this.organData[index]['volume'],
              name: 'Volume Grade'
            }]
          },
          {
            data: [{
              // value: [this.organData[index]['range'][0][0], this.organData[index]['range'][0][1], this.organData[index]['range'][1][0], this.organData[index]['range'][1][1], this.organData[index]['range'][2][0], this.organData[index]['range'][2][1]],
              value: [range[0][0], range[0][1], range[1][0], range[1][1], range[2][0], range[2][1]],
              // name: 'Allocated Budget'
            }]
          }
        ]
      };
      this.myChart.setOption(option);
      this.info = '器官中心点坐标(X,Y,Z): ' + this.organData[index]['center'] + '<br/>\n' +
        '      最大横断面切片在下标 (Z方向): ' + this.organData[index]['biggest_area_index'] + '<br/>\n' +
        '      最大横断面积(Z方向): ' + this.organData[index]['biggest_area'] + '<br/>\n' +
        '      最大横断面的最大外接矩形长宽度(Z方向): ' + this.organData[index]['biggest_area_shape'] + '<br/>'
    },
    loadData() {
      // 显示加载提示
      this.isLoading = true;


      // axios.get('/search_celiang', {
      //   params: {
      //     filename: this.$props.filename  // 将要查询的 filename 值作为参数传递
      //   }
      // })
      //   .then(response => {
      //     this.measurementResults = response.data.measurement_results;
      //     this.countResults = response.data.count_results;
      //     this.classInfo = response.data.class_info;
      //     this.dataArray = JSON.parse(response.data.class_info);
      //

      this.measurementResults = {
        'original_size_of_raw_data': '[106, 512, 512]',
        'original_spacing': '[5.0, 0.78, 0.78]',
        'spacing_after_resampling': '[2.0, 0.78, 0.78]',
        'size_after_resampling': '[265, 513, 513]',
        'br_dia': '[530.0, 400.38, 400.38]',
        'br_areas': '[1310720.0, 42440.7, 42440.7]',
        'br_volume': '84962895',
        'ar_dia': '[530.0, 400.22, 400.22]',
        'ar_areas': '[525312.0, 105850.55, 42422.92]',
        'ar_volume': '84891686'
      };
      this.countResults = {'num_classes': 11, 'classes': '[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]'};
      this.dataArray = [{
        "label": "1",
        "range": "[[323, 430], [161, 290], [80, 96]]",
        "center": "[376.5, 225.5, 88.0]",
        "radius": "[53.5, 64.5, 8.0]",
        "diameter": "[107.0, 129.0, 16.0]",
        "biggest_area_index": "88",
        "biggest_area": "5610",
        "biggest_area_shape": "[123, 92]",
        "volume": "56768"
      }, {
        "label": "2",
        "range": "[[158, 232], [183, 271], [60, 77]]",
        "center": "[195.0, 227.0, 68.5]",
        "radius": "[37.0, 44.0, 8.5]",
        "diameter": "[74.0, 88.0, 17.0]",
        "biggest_area_index": "66",
        "biggest_area": "7086",
        "biggest_area_shape": "[74, 66]",
        "volume": "93028"
      }, {
        "label": "3",
        "range": "[[313, 402], [175, 246], [68, 86]]",
        "center": "[357.5, 210.5, 77.0]",
        "radius": "[44.5, 35.5, 9.0]",
        "diameter": "[89.0, 71.0, 18.0]",
        "biggest_area_index": "79",
        "biggest_area": "13077",
        "biggest_area_shape": "[69, 85]",
        "volume": "145236"
      }, {
        "label": "4",
        "range": "[[185, 230], [254, 313], [72, 80]]",
        "center": "[207.5, 283.5, 76.0]",
        "radius": "[22.5, 29.5, 4.0]",
        "diameter": "[45.0, 59.0, 8.0]",
        "biggest_area_index": "74",
        "biggest_area": "4172",
        "biggest_area_shape": "[40, 34]",
        "volume": "24972"
      }, {
        "label": "5",
        "range": "[[272, 305], [211, 259], [91, 105]]",
        "center": "[288.5, 235.0, 98.0]",
        "radius": "[16.5, 24.0, 7.0]",
        "diameter": "[33.0, 48.0, 14.0]",
        "biggest_area_index": "93",
        "biggest_area": "2240",
        "biggest_area_shape": "[19, 29]",
        "volume": "21995"
      }, {
        "label": "6",
        "range": "[[113, 347], [161, 357], [67, 97]]",
        "center": "[230.0, 259.0, 82.0]",
        "radius": "[117.0, 98.0, 15.0]",
        "diameter": "[234.0, 196.0, 30.0]",
        "biggest_area_index": "86",
        "biggest_area": "153456",
        "biggest_area_shape": "[194, 217]",
        "volume": "2446896"
      }, {
        "label": "7",
        "range": "[[231, 380], [215, 348], [73, 94]]",
        "center": "[305.5, 281.5, 83.5]",
        "radius": "[74.5, 66.5, 10.5]",
        "diameter": "[149.0, 133.0, 21.0]",
        "biggest_area_index": "77",
        "biggest_area": "26866",
        "biggest_area_shape": "[59, 129]",
        "volume": "357308"
      }, {
        "label": "8",
        "range": "[[263, 328], [190, 282], [52, 105]]",
        "center": "[295.5, 236.0, 78.5]",
        "radius": "[32.5, 46.0, 26.5]",
        "diameter": "[65.0, 92.0, 53.0]",
        "biggest_area_index": "102",
        "biggest_area": "5672",
        "biggest_area_shape": "[29, 29]",
        "volume": "222872"
      }, {
        "label": "9",
        "range": "[[224, 272], [230, 278], [50, 101]]",
        "center": "[248.0, 254.0, 75.5]",
        "radius": "[24.0, 24.0, 25.5]",
        "diameter": "[48.0, 48.0, 51.0]",
        "biggest_area_index": "98",
        "biggest_area": "7992",
        "biggest_area_shape": "[27, 41]",
        "volume": "234513"
      }, {
        "label": "10",
        "range": "[[227, 401], [220, 312], [66, 87]]",
        "center": "[314.0, 266.0, 76.5]",
        "radius": "[87.0, 46.0, 10.5]",
        "diameter": "[174.0, 92.0, 21.0]",
        "biggest_area_index": "80",
        "biggest_area": "27660",
        "biggest_area_shape": "[71, 134]",
        "volume": "267190"
      }, {
        "label": "11",
        "range": "[[200, 301], [182, 310], [20, 30]]",
        "center": "[250.5, 246.0, 25.0]",
        "radius": "[50.5, 64.0, 5.0]",
        "diameter": "[101.0, 128.0, 10.0]",
        "biggest_area_index": "26",
        "biggest_area": "112420",
        "biggest_area_shape": "[128, 100]",
        "volume": "754446"
      }]


      for (var i = 0; i < this.dataArray.length; i++) {
        if (this.dataArray[i]["label"] == "1" || this.dataArray[i]["label"] == "3" || this.dataArray[i]["label"] == "6") {
          this.organData.push(this.dataArray[i])
        }
      }


      // 隐藏加载提示
      this.isLoading = false;
      this.$nextTick(() => {
        this.organData = [
          {
            "label": "1",
            "range": [[295, 413], [165, 303], [26, 46]],
            "center": "[354.0, 234.0, 36.0]",
            "radius": [59.0, 69.0, 10.0],
            "diameter": [118.0, 138.0, 20.0],
            "biggest_area_index": 38,
            "biggest_area": 8284,
            "biggest_area_shape": [137, 116],
            "volume": 101624
          },
          {
            "label": "3",
            "range": [[294, 380], [175, 262], [14, 34]],
            "center": "[337.0, 218.5, 24.0]",
            "radius": [43.0, 43.5, 10.0],
            "diameter": [86.0, 87.0, 20.0],
            "biggest_area_index": 27,
            "biggest_area": 11352,
            "biggest_area_shape": [68, 75],
            "volume": 171630
          },
          {
            "label": "6",
            "range": [[86, 323], [158, 366], [18, 48]],
            "center": "[204.5, 262.0, 33.0]",
            "radius": [118.5, 104.0, 15.0],
            "diameter": [237.0, 208.0, 30.0],
            "biggest_area_index": 39,
            "biggest_area": 184992,
            "biggest_area_shape": [204, 213],
            "volume": 2954694
          }
        ]
        this.showEcharts = true;
        this.initEcharts()
        this.registerEcharts();
      });


      // })
      // .catch(error => {
      //   console.error(error);
      //   // 隐藏加载提示
      //   this.isLoading = false;
      // });

    },
    // })},
    toggleTable() {
      this.showTable = !this.showTable; // 切换表格的显示与隐藏状态
    },

  },

  computed: {
    formatLabel() {
      return (row, column) => {
        const labelMappings = {

          "1": "脾脏",
          "2": "右肾",
          "3": "左肾",
          "4": "胆囊",
          "5": "食道",
          "6": "肝脏",
          "7": "胃",
          "8": "主动脉",
          "9": "后腔静脉",
          "10": "胰腺",
          "11": "膀胱"
        };
        const label = row[column.property];
        return labelMappings[label] || "";
      };
    }
  },
  filters: {
    mapLabelToOrganName(label) {

      return labelMappings[label] || "";
    }
  },


  watch: {
    '$props.filename': {
      immediate: false,
      handler(newValue, oldValue) {
        this.loadData();

      }
    }
  },

};
</script>

<style scoped>
.result-card {
  margin-bottom: 20px;
  width: 100%;
}

.card-header {
  font-weight: bold;
  font-size: 18px;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.card-header {
  background-color: #f2f2f2;
  padding: 10px;
  font-weight: bold;
  margin-bottom: 10px;
}

.measurement-table {
  width: 100%;
  border-collapse: collapse;
}

.measurement-table th,
.measurement-table td {
  padding: 8px;
  border: 1px solid #ccc;
  text-align: center;
}

.measurement-table th {
  background-color: #f2f2f2;
}

.toggle-button {
  padding: 10px 20px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.toggle-button:hover {
  background-color: #2980b9;
}

.toggle-button:focus {
  outline: none;
}

.charts {
  position: relative;
  z-index: 8;
}

.four {
  position: absolute;
  top: 2300px;
  right: 350px;
  z-index: 10;
  font-size: 18px;
  line-height: 50px;
}
</style>
